<template>
  <div>
    <!-- 视频 -->
    <div class="videobox">
      <video
        src="../../assets/video/bg-video.d2d602a9.mp4"
        muted="muted"
        loop="loop"
        autoplay="autoplay"
      ></video>
    </div>

    <div class="container">
      <computent
        :is="comName"
        @name="name"
        @coname="name"
        @mesname="name"
        @first="name"
      >
      </computent>
    </div>
  </div>
</template>
<script>
import convention from "./convention";
import ewm from "./Ewm";
import mes from "./Messages";

export default {
  data() {
    return {
      comName: convention,
    };
  },
  components: {
    convention,
    ewm,
    mes,
  },
  methods: {
    name(input) {
      this.comName = input;
    },
    coname(input) {
      this.comName = input;
    },
    mesname(input) {
      this.comName = input;
    },
    first(input) {
      this.comName = input;
    },
  },
};
</script>
<style  lang="less" scoped>
.videobox video {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container {
  width: 430px;
  height: 432px;
  position: fixed;
  top: 25%;
  right: 10%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 100px 0 50px 0;
}
</style>